<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: header"/>
<body style="background-color: #fff">
<style>
    .dm-form{padding-top: 30px; padding-left: 60px;}
    .dm-form tr{height: 50px;}
    .dm-form input{width: 260px}
    .dm-label{width: 80px;padding-right: 15px;text-align: right}
</style>
<form id="form" class="dm-form" method="post" action='/system/dict/editData'>
    <input type="hidden" name="dictId" th:value="${dict.dictId}">
    <table>
        <tr>
            <td class="dm-label">字典类型：</td>
            <td class="dm-content">
                <input class="easyui-textbox" name="dictType" data-options="required:true" th:value="${dict.dictType}" readonly>
            </td>
        </tr>
        <tr>
            <td class="dm-label">字典标签：</td>
            <td class="dm-content">
                <input id="input_label" class="easyui-textbox" name="dictLabel" data-options="required:true" th:value="${dict.dictLabel}">
            </td>
        </tr>
        <tr>
            <td class="dm-label">字典键值：</td>
            <td class="dm-content">
                <input class="easyui-textbox" name="dictValue" data-options="required:true" th:value="${dict.dictValue}">
            </td>
        </tr>
        <tr>
            <td class="dm-label">标签样式：</td>
            <td class="dm-content">
                <input id="input_listClass" name="listClass" data-options="required:true" th:value="${dict.listClass}">
                <span id="span_listClass" class="hidden">示例</span>
            </td>
        </tr>
        <tr>
            <td class="dm-label">菜单排序：</td>
            <td class="dm-content">
                <input class="easyui-numberspinner" name="dictSort" value="1" th:value="${dict.dictSort}">
            </td>
        </tr>
    </table>
</form>
<script>
    $(function () {
        $('#span_listClass').html('[[${dict.dictLabel}]]');

        $('#input_label').textbox({
            onChange: function (nv,ov) {
                $('#span_listClass').html(nv);
            }
        })

        $('#input_listClass').combobox({
            data: [
                {value:'layui-bg-red', text:'红色'},
                {value:'layui-bg-orange', text:'橙色'},
                {value:'layui-bg-green', text:'绿色'},
                {value:'layui-bg-cyan', text:'青色'},
                {value:'layui-bg-blue', text:'蓝色'},
                {value:'layui-bg-black', text:'黑色'},
                {value:'layui-bg-gray', text:'灰色'}
            ],
            panelHeight: 'auto',
            editable: false,
            onSelect: function(record){
                $('#span_listClass').removeClass();
                $('#span_listClass').addClass('layui-badge');
                $('#span_listClass').addClass(record.value);
            }
        })
    })

    function submitHandler(index) {
        dm.save('form', function() {
            parent.layer.close(index);
            parent.dm.search('table1');
        })
    }
</script>
</body>
</html>
